<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; ">
    <el-table-column label="资产" prop="assetName" width="150"></el-table-column>
    <el-table-column label="客户名称" prop="customerName" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.customerName || '空置' }}</span>
      </template>
    </el-table-column>
    <el-table-column label="费用项" prop="chargeItemName" width="150"></el-table-column>
    <el-table-column :label="allMoney1" width="185">
      <template slot-scope="scope">
        <span>{{ scope.row.allMoney1 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="allMoney2" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.allMoney2 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="isExecute" :label="allMoney3" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.allMoney3 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="isExecute" :label="allMoney4" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.allMoney4 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column v-if="isExecute" :label="allMoney5" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.allMoney5 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column label="差异" width="150">
      <template slot-scope="scope">
        <span>{{ scope.row.differenceAmount | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column label="差异率" prop="differenceRate">
      <template slot-scope="scope">
        <span :class="scope.row.differenceRate > 0 ? 'color-3384FE' : 'color-red'">{{ scope.row.differenceRate || 0 | accMul }}%</span>
      </template>
    </el-table-column>
    <el-table-column :label="`1月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount1 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`2月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount2 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`3月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount3 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`4月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount4 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`5月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount5 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`6月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount6 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`7月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount7 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`8月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount8 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`9月${monthTxt}`" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount9 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`10月${monthTxt}`" width="90">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount10 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`11月${monthTxt}`" width="90">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount11 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`12月${monthTxt}`" width="90">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount12 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    props: {
      sourceData: {
        type: Array,
        default: () => {
          return [];
        },
      },
      isExecute: {
        type: Boolean,
        default: false,
      },
      tableType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        allMoney1: '',
        allMoney2: '',
        allMoney3: '',
        allMoney4: '',
        allMoney5: '',
        monthTxt: '',
        tableData: [],
      };
    },

    watch: {
      tableType: {
        immediate: true,
        handler(val) {
          this.initTableThTxt(val);
        },
      },

      sourceData: {
        deep: true,
        handler(val) {
          console.log(98);
          this.initTableData();
        },
      },
    },

    methods: {
      initTableThTxt(val) {
        if (val == 'executeIncomeCash' || val == 'executeIncomeDuty') {
          this.allMoney1 = '累计当前确认应收金额';
          this.allMoney2 = '累计当前收款金额';
          this.allMoney3 = '累计账单逾期金额';
          this.allMoney4 = '预计年度总收款';
          this.allMoney5 = '计划收入总金额';
          this.monthTxt = val == 'executeIncomeCash' ? '收款' : '收入';
        } else if (val == 'compileIncomeCash' || val == 'compileIncomeDuty') {
          this.allMoney1 = '年度收入总金额';
          this.allMoney2 = '上一年收入总金额';
          this.monthTxt = val == 'compileIncomeCash' ? '收款' : '收入';
        }
      },
      //处理table数据
      initTableData() {
        this.tableData = [];
        let list = this.lodash.cloneDeep(this.sourceData);
        list.forEach(project => {
          if (!project.child || project.child.length == 0) {
            // project.child = [{}];
          }
          project.child.forEach(item => {
            item.assetName = project.assetName;
            item.customerName = project.customerName;
            this.tableData.push(item);
          });
        });
      },
      //合并行  当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let initNum = 0; //当前项目在table中是第几行开始的
        let rowColSpan = {
          rowspan: 0,
          colspan: 0,
        };
        //只处理第一列，每次根据当前项目的 类别个数 进行合并第一列的行
        if (columnIndex === 0 || columnIndex === 1) {
          this.sourceData.forEach(item => {
            if (item.child && item.child.length > 0) {
              let dividend = item.child.length; //当前项目的类别个数
              if (rowIndex == initNum) {
                rowColSpan = {
                  rowspan: dividend,
                  colspan: 1,
                };
              }
              initNum = initNum + dividend; //合并后 加上上一个项目的类别个数
            }
          });
          return rowColSpan;
        }
      },
    },

    mounted() {},
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__header th {
    background: rgba($color: #f8f8f8, $alpha: 1);
  }
</style>
